<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击事件</title>
</head>
<style>
    body{
        background-color: rgb(26, 22, 22);
        width: 100%;
        height: 100%;
    }
    #mouse{
        /*position必须设置成相对位置 */
        position: absolute;

        /* 禁止文字被选中 */
        -webkit-user-select:none;/*webkit浏览器*/ 
        -moz-user-select:none;/*火狐*/ 
        -ms-user-select:none;/*IE10*/ 
        user-select:none;
    }
    .animate-up {
        transform: translateY(-60px); /* 向上平移20像素 */
        transition: transform 0.3s ease; /* 运动效果，0.3s移动的时间*/
    }

</style>
<body>

    <div id="mouse"></div>    
        
</body>
<script text="text/javascript">

    document.addEventListener('DOMContentLoaded', function() {
        let arr = ["富强", "民主", "文明", "和谐", "自由", "平等", "公正", "法治", "爱国", "敬业", "诚信", "友善"];
        let index = 0;
        let mouse = document.getElementById("mouse");
        // 定时器id
        let timeOutId;
        document.onmousemove=function(move) {
            // 获取鼠标光标位置
            let left = move.pageX;
            let top = move.pageY;
            
            mouse.style.left=left+"px";
            mouse.style.top=top+"px";
        }

        document.addEventListener('click', function(event) {
            clearTimeout(timeOutId);
            if (event.button === 0) {
                console.log(arr[index]);
                index++;
                if (index >= arr.length) {
                    index = 0;
                }
                mouse.style.color = randomColor();
                mouse.innerText=arr[index];
                mouse.classList.remove('animate-up');   // 移除可能已存在的动画类
                void mouse.offsetWidth;                 // 强制重绘，以便重新触发动画
                mouse.classList.add('animate-up');      // 添加向上平移动画类
                timeOutId = textDisappear();
    
            }
        });

        function textDisappear() {
            let time =  setTimeout(function(){
                        mouse.innerText="";
                        mouse.classList.remove('animate-up');
                        console.info("定时器消失")
                        },300) 
            return time;
        }
    
        // 随机获取颜色
        function randomColor(){
          var str = "rgba(" + parseInt(Math.random() * 256) +
                     "," + parseInt(Math.random() * 256) +
                    "," + parseInt(Math.random() * 256) + ",1)";
          return str;
      }
    });
</script>
</html>